<template>
    <div class="area-table">
        <Row>
            <card>
                <Row>
                    <div>
                        <Button type="primary" @click="openAreaModal">新增地区宽限期</Button>
                    </div>
                    <br>
                    <Col span="24">
                        <Table
                            width="100%"
                            :columns="areaTableHead"
                            :data="areaTable.records"
                            border
                        >
                            <template slot-scope="{ row }" slot="action">
                                <Button type="primary" size="small" @click="showAreaDetial(row)">编辑</Button>
                                <Button type="error" size="small" @click="delAreaList(row)">删除</Button>
                            </template>
                        </Table>
                    </Col>
                    <Col span="24">
                        <Row type="flex" justify="end" class="table-page">
                            <Page
                                :current="areaTable.current"
                                :transfer="true"
                                :total="areaTable.total"
                                :page-size="areaTable.size"
                                @on-change="changePage"
                                @on-page-size-change="changePageSize"
                                :page-size-opts="pageSizeOpts"
                                size="small"
                                show-total
                                show-elevator
                                show-sizer
                            />
                        </Row>
                    </Col>
                </Row>
            </card>
        </Row>
        <Modal v-model="areaVal" :title="modelTitle" :width="500">
            <Form
                ref="formData"
                :model="formData"
                :label-width="110"
                :rules="formVali"
            >
                <FormItem label="特许地区码" prop="licensedAreaCode ">
                    <Input v-model="formData.licensedAreaCode" style="width:198px" disabled/>
                </FormItem>
                <FormItem label="地区的宽限天数" prop="gracePeriodDays">
                    <InputNumber :min="0"  v-model="formData.gracePeriodDays" style="width:198px"/>
                </FormItem>
                <FormItem label="特许地区" prop="Name">
                    <Cascader v-model="formData.Name" :load-data="loadData" :data="areaList" @on-change="format"
                              style="width:200px">
                    </Cascader>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="areaVal=false">取消</Button>
                <Button type="primary" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        findAreaGraceList,
        findAddressList,
        saveAreaGraceInfo,
        delAreaInfo
    } from "_p/basic/api/contract/business/system-business";
    import {deepClone} from "@/libs/utils/ObjectClone";

    export default {
        data() {
            return {
                areaVal: false,
                areaList: [],
                modelTitle: null,
                formValidate: {
                    pageNumber: 1, // integer($int32) // 当前页
                    pageSize: 5, //integer($int32) // 多少条
                    status: "valid" // 状态
                },
                formData: {
                    // 添加或编辑表单对象初始化数据
                    Name: [],
                    id: null,
                    status: "valid",
                    licensedAreaCode: "",
                    licensedAreaName: "",
                    gracePeriodDays: null
                },
                formVali: {
                    //表单验证规则
                    gracePeriodDays: [
                        {required: true, message: "不能为空"}
                    ],
                    Name:[
                        {required: true, message: "请选择"}
                    ]
                },
                areaTableHead: [
                    {
                        title: "操作",
                        slot: "action",
                        align: "center",
                        fixed: "left"
                    },
                    {
                        title: "地区宽限期天数",
                        key: "gracePeriodDays",
                        align: "center",
                        className: "gracePeriodDays"
                    },
                    {
                        title: "特许地区",
                        key: "licensedAreaName",
                        align: "center",
                    },
                    {
                        title: "特许地区码",
                        key: "licensedAreaCode",
                        align: "center",
                    }
                ],
                areaRow: {},
                areaTable: {
                    current: 1, // 表格当前页
                    pages: 0,
                    searchCount: false,
                    size: 5,
                    total: 0,
                    orders: [],
                    records: []
                },
                pageSizeOpts: [5, 10, 15, 20]
                // selct 数据字典
            };
        },
        mounted() {
            //载入中查询
            this.init();
        },
        methods: {
            init() {
                this.findAddressList();
                this.getAreaList(this.formValidate);
            },
            // 分页
            changePageSize(num) {
                // this.getAreaList(Object.assign({}, this.formValidate, {pageSize: num}));
                this.formValidate.pageSize = num;
            },
            changePage(num) {
                this.getAreaList(
                    Object.assign({}, this.formValidate, {pageNumber: num})
                );
                this.formValidate.pageNumber = num;
            },
            getAreaList(data) {
                findAreaGraceList(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.areaTable = res.data;
                    }
                });
            },
            showAreaDetial(row) {
                this.modelTitle = '地区宽限期编辑';
                this.areaVal = true;
                this.formData = deepClone(row);
                let name = [row.provinceCode, row.licensedAreaCode];
                this.formData.Name = name;
            },
            openAreaModal() {
                this.modelTitle = '地区宽限期新增';
                this.$refs.formData.resetFields();
                this.formData.id = '';
                this.formData.licensedAreaName = '';
                this.formData.licensedAreaCode = '';
                this.formData.Name = [];
                this.areaVal = true;
            },
            delAreaList(data) {
                delAreaInfo(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.$Message.success(res.msg);
                        this.formValidate.pageNumber = 1;
                        this.getAreaList(this.formValidate)
                    }
                });
            },
            handleSubmit() {
                this.$refs.formData.validate(valid => {
                    if (valid) {
                        saveAreaGraceInfo(this.formData).then(res => {
                            this.loading = false;
                            if (res.code === "0000") {
                                this.$Message.success(res.msg);
                                this.areaVal = false;
                                this.getAreaList(this.formValidate);
                            } else {
                                this.$Message.error("Fail!");
                            }
                        });
                    }
                    this.$parent.init();
                });
            },
            //特许地区列表
            findAddressList() {
                let param = "";
                param = {
                    level: "1",
                    upperCode: "1"
                };
                findAddressList(param).then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(item => {
                            let obj = {
                                value: item.value,
                                label: item.label,
                                children: [],
                                level: 0,
                                loading: false
                            };
                            this.areaList.push(obj);
                        });
                    }
                });
            },
            loadData(item, callback) {
                console.log(item);
                item.loading = true;
                let param = "";
                param = {
                    level: item.level + 1,
                    upperCode: item.value
                };
                findAddressList({upperCode: item.value}).then(res => {
                    if (res.code == "0000") {
                        res.data.forEach(val => {
                            let obj = {
                                value: val.value,
                                label: val.label
                            };
                            let templevel = parseInt(item.level);
                            // 当层级没有到最后一层
                            if (templevel + 1 < this.totalLevel - 1) {
                                obj.children = [];
                                obj.level = templevel + 1;
                                obj.loading = false;
                            }
                            item.children.push(obj);
                        });
                        item.loading = false;
                        callback();
                    }
                });
            },
            //查询特许地区编码
            format(labels, selectedData) {
                this.formData.licensedAreaCode = selectedData[1].value;
                this.formData.licensedAreaName = selectedData[1].label;
                this.formData.provinceCode = selectedData[0].value;
            }
        },
        computed: {}
    };
</script>
